<template>
  <div ref="elRef">Study02-SimpleMesh</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { init } from "./service";
import * as THREE from "three";

const { canvas, renderFn, scene } = init();

/**@type {import('vue').Ref<HTMLDivElement>} */
const elRef = ref(null);

onMounted(() => {
  elRef.value.appendChild(canvas);
  // OctahedronGeometry , SphereGeometry
  const geo = new THREE.SphereGeometry(100);
  // MeshMatcapMaterial , MeshBasicMaterial , MeshNormalMaterial , MeshDepthMaterial
  // MeshLambertMaterial , MeshToonMaterial
  const M = THREE.MeshLambertMaterial;

  const material = new M({
    color: 0xddffaa,
    // wireframe: true,    
  });
  const mesh = new THREE.Mesh(geo, material);
  scene.add(mesh);

  const directionalLight = new THREE.DirectionalLight(0xffffff);
  directionalLight.position.set(1, 1, 1);
  scene.add(directionalLight);

  renderFn();
});
</script>